<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 如果对方图片服务器 => 有识别功能 添加此标签(请求时不携带自身Referer信息) -->
    <meta name="referrer" content="never">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/formatDate.js"></script>
    <style>
        .container {
            width: 800px;
            margin: 50px auto;
        }

        .comment-wrap .comment-box {
            width: 100%;
            height: 200px;
        }

        .comment-wrap .comment-box .comment-content {
            width: 100%;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            resize: none;
            outline: none;
            border-color: #E3E5E7;
        }

        .comment-wrap .comment-footer {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }

        .comment-wrap .comment-footer .comment-tips {
            font-size: 14px;
            line-height: 24px;
        }

        .comment-list {
            margin-top: 50px;
        }

        .comment-list .list-item {
            padding: 5px 0;
            display: flex;
        }

        .comment-list .list-item .user-face {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 10px;
            margin-top: 20px;
        }

        .comment-list>.list-item>.user-con {
            border-top: 1px solid #E3E5E7;
            flex: 1;
            padding: 20px;
        }

        .comment-list .list-item .user-con .user {
            font-size: 13px;
            line-height: 20px;
        }

        .comment-list .list-item .user-con .text {
            font-size: 14px;
            line-height: 20px;
            min-height: 20px;
            margin-top: 5px;
        }

        .comment-list .list-item .user-con .info {
            font-size: 12px;
            line-height: 16px;
            margin-top: 5px;
        }

        .comment-list .list-item .user-con .info span {
            margin-right: 10px;
        }

        .comment-list .list-item .reply-box {
            margin-top: 10px;
        }

        .comment-list .list-item .reply-box .user-face {
            width: 30px;
            height: 30px;
            margin-top: 5px;
        }

        .comment-list .list-item .reply-box .reply-con {
            display: flex;
        }

        .comment-list .list-item .reply-box .reply-con .user {
            margin-top: 5px;
            margin-right: 10px;
        }

        .comment-list .list-item .reply-wrap {
            margin-top: 10px;
            display: flex;
            height: 64px;
            display: none;
        }

        .comment-list .list-item .reply-wrap .reply-comment {
            flex: 1;
            outline: none;
            resize: none;
        }

        .comment-list .list-item .reply-wrap .reply-send {
            width: 64px;
            height: 64px;
            margin-left: 20px;
            background-color: #00a1d6;
            color: #fff;
            border-radius: 10px;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .comment-list .list-item .reply-wrap .reply-send span {
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="comment-wrap">
            <div class="comment-box">
                <textarea name="" cols="30" rows="10" maxlength="50" class="comment-content"></textarea>
            </div>
            <div class="comment-footer">
                <div class="comment-tips">你还可以输入50个字</div>
                <button class="comment-send">发送</button>
            </div>
        </div>

        <div class="comment-list">
            <!-- <div class="list-item">
                <div class="user-face">
                    <img src="https://i2.hdslb.com/bfs/face/b20034eb0a516744566530144b649f6651cdfc40.jpg@48w_48h_1c_1s.webp"
                        alt="">
                </div>
                <div class="user-con">
                    <div class="user">张三</div>
                    <div class="text">有人在看段子，有人在照镜子</div>
                    <div class="info">
                        <span class="time">2022-04-09 10:11</span>
                        <span class="reply reply-level-1">回复</span>
                    </div>
                    <div class="reply-box">
                        <div class="list-item">
                            <div class="user-face">
                                <img src="https://i2.hdslb.com/bfs/face/b20034eb0a516744566530144b649f6651cdfc40.jpg@48w_48h_1c_1s.webp"
                                    alt="">
                            </div>
                            <div class="user-con">
                                <div class="reply-con">
                                    <div class="user">张三</div>
                                    <div class="text">有人在看段子，有人在照镜子</div>
                                </div>
                                <div class="info">
                                    <span class="time">2022-04-09 10:11</span>
                                    <span class="reply reply-level-2">回复</span>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="reply-wrap">
                        <textarea name="" id="" cols="30" rows="10" class="reply-comment"></textarea><a
                            href="javascript:;" class="reply-send"><span>发表<br>评论</span></a>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</body>
<script>
    // 模拟bilibili 留言回复
    // (1) 输入时计数统计
    //    a. 先按下 在输入 => 按下时,字符可能还没有输入 => 差了一位 => 解决:抬起时在触发一遍
    //    b. 中文输入法可能会卡bug: => 悬浮输入 =>   解决错误: 截取前50
    //    c. 中文输入是字符串也会被计数

    // (2) 点击发送 快捷键发送
    // (3) 留言回复

    var commentContent = document.getElementsByClassName("comment-content")[0];
    var commentTips = document.getElementsByClassName("comment-tips")[0];
    var commentSend = document.getElementsByClassName("comment-send")[0];
    var commentList = document.getElementsByClassName("comment-list")[0];

    var commentSum = 50;

    // oninput 
    commentContent.oninput = function (e) {
        var comment = commentContent.value.trim();

        var count = commentSum - comment.length;

        if (count < 0) {  // 超出
            // if (e.preventDefault()) {  // oninput不是键盘事件 => 无法阻止键盘输入
            //     e.preventDefault()
            // } else {
            //     e.returnValue = false;
            // }

            // 1. 借助maxlength做限制  => 最多只能输50个  => maxlength可能会被别人手动更改
            // 2. 如果输入的内容超过50 -> 截取前50放到页面中

            console.log(comment);
            comment = comment.substr(0, 50);
            console.log(comment);
            commentContent.value = comment;
            commentTips.textContent = `你还可以输入0个字`;
        } else {
            commentTips.textContent = `你还可以输入${count}个字`;
        }
    }

    commentContent.onkeydown = function (e) {
        var e = e || window.event;
        var keyCode = e.which || e.keyCode;
        // console.log(e.key,keyCode);
        if (e.ctrlKey && keyCode == 13) {
            // commentSend.onclick();

            var e = new Event("click");
            commentSend.dispatchEvent(e);

        }


    }

    commentSend.onclick = function () {
        var comment = commentContent.value.trim();
        if (comment) { // 有评论再发送
            commentList.innerHTML = `<div class="list-item">
                <div class="user-face">
                    <img src="https://i2.hdslb.com/bfs/face/b20034eb0a516744566530144b649f6651cdfc40.jpg@48w_48h_1c_1s.webp"
                        alt="">
                </div>
                <div class="user-con">
                    <div class="user">张三</div>
                    <div class="text">${comment}</div>
                    <div class="info">
                        <span class="time">${formatDate("YYYY-MM-DD hh:mm")}</span>
                        <span class="reply reply-level-1">回复</span>
                    </div>
                    <div class="reply-box">
                    </div>
                    <div class="reply-wrap">
                        <textarea name="" id="" cols="30" rows="10" class="reply-comment"></textarea><a
                            href="javascript:;" class="reply-send"><span>发表<br>评论</span></a>
                    </div>
                </div>
            </div>` + commentList.innerHTML;
            commentContent.value = "";
            commentTips.textContent = `你还可以输入${commentSum}个字`;
        }
    }


    commentList.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        console.log(target);
        if (target.classList.contains("reply-level-1")) { //点击了一级回复
            // 点击一级回复 显示回复盒子
            var useCon = target.parentElement.parentElement;
            var replyWrap = useCon.getElementsByClassName("reply-wrap")[0];
            replyWrap.style.display = "flex";
        }else if (target.classList.contains("reply-level-2")) { //点击了一级回复
            // 点击一级回复 显示回复盒子
            var replyBox = target.parentElement.parentElement.parentElement.parentElement;
            var replyWrap =replyBox.nextElementSibling;
            replyWrap.style.display = "flex";
        } else if (target.classList.contains("reply-send")) {
            var replyComment = target.previousElementSibling;
            var replyVal = replyComment.value;
            console.log(replyVal);

            var replyWrap = target.parentElement;
            var replyBox = replyWrap.previousElementSibling;  //装二级回复的盒子

            replyBox.innerHTML += `<div class="list-item">
                            <div class="user-face">
                                <img src="https://i2.hdslb.com/bfs/face/90fb689bf520ec07e1470da343b27b030d6ba3b4.jpg@160w_160h_1c_1s.webp"
                                    alt="">
                            </div>
                            <div class="user-con">
                                <div class="reply-con">
                                    <div class="user">张三</div>
                                    <div class="text">${replyVal}</div>
                                </div>
                                <div class="info">
                                    <span class="time">${formatDate("YYYY-MM-DD hh:mm")}</span>
                                    <span class="reply reply-level-2">回复</span>
                                </div>
                            </div>
                        </div>`;

            replyComment.value = "";
            replyWrap.style.display = "none";

        }

    }




</script>

</html>